<template>
  <section class="header">
    <h1>{{title}}</h1>
    <div class="clock-box">
      <div class="date">
        <span>{{week}}</span>
        <span>{{date}}</span>
      </div>
      <div class="time">
         {{ time }}
      </div>
    </div>
  </section>
</template>

<script>
const week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const zeroPadding = (num, digit) => {
    let zero = '';
    for(let i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
};
export default {
  name: "Header",
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
      return {
          time: '',
          date: '',
          week: '',
          timerID: null
      };
  },
  mounted() {
      this.updateTime();
      this.timerID = setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.time = zeroPadding(now.getHours(), 2) + ':' + zeroPadding(now.getMinutes(), 2) + ':' + zeroPadding(now.getSeconds(), 2);
      this.date = zeroPadding(now.getFullYear(), 4) + '/' + zeroPadding(now.getMonth()+1, 2) + '/' + zeroPadding(now.getDate(), 2);
      this.week = week[now.getDay()];
    },
  },
  beforeDestroy() {
      if(this.timerID) {
          window.clearInterval(this.timerID);
          this.timerID = null;
      }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .header{
    width: 100vw;
    height: 88px;
    background-color: rgb(13,16,48);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    &>h1{
      height: 100%;
      line-height: 88px;
      text-align: center;
      font-size: 42px;
      color: #fff;
      opacity: 0.85;
      letter-spacing: 0.48px;
    }
    &>.clock-box{
      position: absolute;
      right: 20px;
      top: 15px;
      height: 54px;
      width: 230px;
      border-left: 2px solid #fff;
      padding-left: 30px;
      display: flex;
      color: #fff;
      & .date{
        font-size: 16px;
        margin-right: 20px;
        line-height: 26px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      & .time{
        font-size: 32px;
        line-height: 54px;
      }
    }
  }
</style>
